<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@ include file="../../root.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=11">
<link rel="stylesheet" href="${basePath}static/fonts/font-awesome.min.css" />
<link rel="stylesheet" href="${basePath}static/css/main.css" />
<link rel="stylesheet" href="${basePath}static/css/fas.css" />
<style>
    /*.fas{width:1910px;height:880px;margin:0px;padding:0px;background-color: #00C8FF; }*/
</style>
    <script>
        document.execCommand("BackgroundImageCache", false, true);
    </script>
<title>FAS</title>
</head>
<body>
<div class="fas">
    <%--<div class="top"><%@ include file="../../jsp/header.jsp"%></div>--%>
    <div class="center" >

            <div class="right">
            <div class="left"><%@ include file="../../jsp/fasLeft.jsp"%></div>
            <div class="left1">
                                <div class="menu" style="background-color: #aeb9bd;height: 866px;border-right: 10px solid #aeb9bd;border-bottom: 2px solid #aeb9bd;clip-path: polygon(0% 0%,100% 0%, 100% 98%, 0% 100%,0% 100%);width: 0px;position: fixed;">
                                </div>
                                <div style="float:left;cursor: pointer;margin-left: 10px;" onclick="javascript:showLeft1();">
                                    <div style="float:left;width: 25px;height: 30px;background: #aeb9bd;position: absolute;clip-path: polygon(0% 0%, 100% 50%, 0% 50%, 0% 0%);"></div>
                                    <div style="float:left;background: #aeb9bd;width: 25px;position: absolute;height: 135px;margin-top: 15px;"></div>
                                    <div style="float:left;width: 25px;height: 25px;background: #aeb9bd;position: absolute;clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 0%);margin-top: 150px;"></div>
                                    <i class="fa fa-angle-double-right fa-2x" style="margin-top: 62px;position: absolute;color: #ffffff;margin-left: 0px;"></i>
                                    <img src="${basePath}static/images/null.png" width="30" height="170" usemap="#planetmap" style="border:0px">

                                </div>
             </div>
             <div style="width: 1838px;height: 30px;margin-left: 10px;text-align: center;color: #FFFFFF;padding-top: 10px;">
                        <span  id="page_title" style="font-family:'微软雅黑';font-size: 30px;">展厅公共区</span>
              </div>
            <div class="fas208"><img id="208" alt="" src="${basePath}static/images/fas/GYQ_green.png" onclick="show1('208');" ></div>
<div class="fas209"><img id="209" alt="" src="/Metro/static/images/fas/GYQ_green.png" onclick="show1('209');"></div>
<div class="fas210"><img id="210" alt="" src="/Metro/static/images/fas/GYQ_green.png" onclick="show1('210');"></div>
<div class="fas211"><img id="211" alt="" src="/Metro/static/images/fas/GYQ_green.png" onclick="show1('211');"></div>
<div class="fas212"><img id="212" alt="" src="/Metro/static/images/fas/GYQ_green.png" onclick="show1('212');"></div>
<div class="fas214"><img id="214" alt="" src="/Metro/static/images/fas/GYQ_green.png" onclick="show1('214');"></div>
<div class="fas215"><img id="215" alt="" src="/Metro/static/images/fas/GYQ_green.png" onclick="show1('215');"></div>
<div class="fas230"><img id="230" alt="" src="/Metro/static/images/fas/GYQ_green.png" onclick="show1('230');"></div>
<div class="fas231"><img id="231" alt="" src="/Metro/static/images/fas/GYQ_green.png" onclick="show1('231');"></div>
<div class="fas232"><img id="232" alt="" src="/Metro/static/images/fas/GYQ_green.png" onclick="show1('232');"></div>

<!-- 组合式 -->
<div class="waikuang" id="zhsktq">
    <div id="zhTitle">
        <div id="zhImg"><img src="${basePath}static/images/zhktq.png" /></div>
        <div id="zhTxt">
            <span>&nbsp;感烟探测器<span id="devcode1"></span></span>
        </div>
        <div id="zhEdit">
            <img style="cursor:pointer" src="${basePath}static/images/zhEdit.png" onclick="hide1()" />
        </div>
    </div>
    <div id="zhCount">
        <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="4" class="zhTdTitle" >设备信息</td>
            </tr>
            <tr>
                <td class="td1">设备名称：</td>
                <td>感烟探测器</td>
                <td class="td2">设备代码：</td>
                <td><span id="devcode2"></span></td>
            </tr>
            <tr>
                <td class="td1">安装位置：</td>
                <td>站厅公共区</td>
            </tr>
            <tr>
                <td colspan="4" class="zhTdTitle">设备状态</td>
            </tr>
            <tr>
                <td class="td1">火灾报警状态：</td>
                <td><span id="firealarm"></span></td>
                <td class="td2">隔离信号状态：</td>
                <td><span id="quarantine"></span></td>
            </tr>
            <tr>
                <td class="td1">故障信号状态：</td>
                <td><span id="signal"></span></td>
                <td class="td2"></td>
                <td></td>
            </tr>
        </table>
    </div>
</div>
</div>
</div>
    <%--<div class="bottom"><%@ include file="../../jsp/bottom.jsp"%></div>--%>
</div>
<script src="${basePath}static/js/jquery-1.4.2.min.js"></script>
<script src="${basePath}view/jsp/js/fas.js" defer="true"></script>
<script src="${basePath}static/js/common.js"></script>
<script>
    $(document).ready(function () {
        //初始化页面标题
        initial_pagetitle();
        //setMenu('FAS','${basePath}')
        $(".waikuang").mousedown(function(e)//e鼠标事件
        {
            $(this).css("cursor", "move");//改变鼠标指针的形状

            var offset = $(this).offset();//DIV在页面的位置
            var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离
            var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离
            $(document).bind("mousemove", function(ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
            {
                $(".waikuang").stop();//加上这个之后

                var _x = ev.pageX - x;//获得X轴方向移动的值
                var _y = ev.pageY - y;//获得Y轴方向移动的值

                $(".waikuang").animate({
                    left : _x + "px",
                    top : _y + "px"
                }, 10);
            });
        });

        $(document).mouseup(function() {
            $(".waikuang").css("cursor", "default");
            $(this).unbind("mousemove");
        });

        getFasStatus();
    });
    //IE下CSS背景图片闪烁的Bug
</script>
</body>
</html>